<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-24 11:42:22
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiInput\uiInput.vue
 * CIMC-V2
-->
<template>
  <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <div class="w-full">
      <el-input-number
        :ref="info._id"
        v-model="formDataModel"
        v-ui-ref="vSetRef"
        clearable
        :controls="info.extension.controls.value"
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        :max="isFiniteFunc(info.extension.maxVal.value) ? info.extension.maxVal.value : 100000000000000000000"
        :min="isFiniteFunc(info.extension.minVal.value) ? info.extension.minVal.value : -100000000000000000000"
        :precision="precisionValue"
        :size="info.extension.size.value"
        :step="isFiniteFunc(info.extension.step.value) ? info.extension.step.value : 1"
        @change="handleInput"
        @focus="handleFocus"
        @keyup.enter="$handleEnter"
        @mousewheel.prevent
      />
    </div>
  </UiFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import isFinite from 'lodash/isFinite'
  import isInteger from 'lodash/isInteger'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import { processingConstant } from '@ve/utils/utils'
  // import { getModelByModelTree } from '@ve/utils/utils'
  export default defineComponent({
    name: 'UiNumberInput',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        anIntegerModel: '',
        formModule: {}, // 组件所在表单组件
      }
    },
    computed: {
      formModuleData() {
        return this.formModule.data && this.formModule.data.formData
      },
      precisionValue() {
        let val = this.judgeValue(this.info.extension.precisionConstant.value)
        return val || val === 0 ? val : this.info.extension.precision.value
      },
    },
    watch: {
      formModuleData: {
        deep: true,
        handler(newval) {
          console.log(this.info.extension?.nullValueControl?.value, newval[this.anIntegerModel])
          console.log(this.formDataModel)
          if (this.info.extension?.nullValueControl?.value && !newval[this.anIntegerModel]) {
            // 如果配置了空值不控制并且值为空 则不进行判断
            this.info.extension.step.value = 1
          } else {
            // 判断整数倍条件
            const result = this.formDataModel / newval[this.anIntegerModel]
            if (!isInteger(result)) {
              // 如果不是整数倍 则将值置为空
              this.$nextTick(() => {
                this.formDataModel = 0
              })
            }
            // 将 step 置为绑定值
            this.info.extension.step.value = newval[this.anIntegerModel]
          }
        },
      },
    },
    mounted() {
      this.anIntegerModel = this.info.extension?.anInteger?.value || ''
      if (this.anIntegerModel) {
        // 如果有配置整数倍选项 则记录
        // 先查找表单项所在的表单组件
        setTimeout(() => {
          // 延迟代码执行 防止查找不到对应的组件
          const formModule = this.vuiComponents[this.formId]?.self
          console.log('formModule ------------', formModule)
          if (formModule) {
            this.formModule = formModule.getInfo
          }
        })
      }
    },
    methods: {
      handleInput() {
        this.setPageModulesState('value', this.formDataModel)
        // 调用 change 事件
        this.onChange()
      },
      // 处理precision的值
      // 情况:NaN,负数,非整数,常量,常量是NaN、负数、非整数
      judgeValue(val) {
        if (isNaN(val)) {
          // 是NaN
          let constant = processingConstant(this, val)
          if (!isNaN(constant) && Number(constant) >= 0) {
            return Math.floor(Number(constant))
          } else if (Number(constant) < 0) {
            return 0
          } else {
            return false
          }
        } else {
          return false
        }
      },
      isFiniteFunc(val) {
        return isFinite(val)
      },
      handleFocus() {
        // console.log('选中了', this.$refs[this.info._id].$el)
        // console.log(this.$refs[this.info._id].$el.getElementsByTagName('input')[0])
        if (this.$refs[this.info._id] && this.$refs[this.info._id].$el && this.$refs[this.info._id].$el.getElementsByTagName('input')[0]) {
          this.$refs[this.info._id].$el.getElementsByTagName('input')[0].select()
        }
      },
    },
  })
</script>

<style lang="scss" scoped>
  .el-input-number {
    width: 100%;
  }
  :deep() .el-input-number--mini .el-input-number__decrease,
  :deep() .el-input-number--mini .el-input-number__increase {
    height: 24px;
  }

  :deep() [type='number'] {
    border: 1px solid #dcdfe6;
  }
</style>
